<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_元素类名操作</title>
		<!--  元素类名操作--针对css中类名：可以做添加，移除，切换，和包含
		addCLass（）    有参【1个参，多个参】
		                功能：匹配元素集合中的所有元素添加一个类名或多个类名
						语法：addClass（“类名”）
						语法：addCLss（“类名1 类名2”）
	   removeClass() 有参【1个参，多个参】 
						功能：从匹配元素集合中的所有元素移除一个类名或多个类名 
						toggleClass() 功能：如果元素有指点类名则移除，没有则添加
       hasClass（）     功能：检查匹配元素集合中是否存在指定类名，返回值bool
		 -->
		 
		 <script src="../js/jquery-1.11.1.js"></script>
		 <style>
			 .bg{
				 width: 300px;
				 height: 300px;
				 background: #f00;
				 
			 }
			 .bd{
				 border: 10px solid #ff0 ;
				 border-radius: 50%;
			 }
		 </style>
	</head>
	<body>
		<!-- html 结构 4个按钮 2个空间 -->
		<div id="targetElment""></div>
		<button id="addClassBtn">添加类名</button>
		<button id="removeClassBtn">移除类名</button>
		<button id="toggleClasssBtn">切换类名</button>
		<button id="hasClassBtn" >判断存在类名</button>
		<div id="resultArea"></div>
		<script>
						//1.类名切换：  css存在可用类名   
						// 点击  添加类名  实现效果：300*300 红色背景色
						$("#addClassBtn").click(function(){
							$("#targetElment").addClass("bg bd");
							$("#resultArea").html("<h4>已经切换样式：.bg</h4>");
						});
						//2.移除类名：  实现效果：  点击移除类名 实现 300*300 红色背景色
						$("#removeClassBtn").click(function(){
							$("#targetElment").removeClass("bd bg");
							$("#resultArea").html("<h4>已经移除样式：.bd</h4>");
						});
						//3.切换类名：  实现效果：  点击切换类名 实现 300*300的圆边框 红色背景色 
					    //4.样式全部移除，实现效果：实现 300*300 红色背景色
						$("#toggleClassBtn").click(function(){
							//存在bg 移除    不存在  添加 bg
					    	$("#targetElment").toggleClass("bg");
					    	$("#resultArea").html("<h4>已经切换样式：存在样式移除，不存在添加</h4>");
					    });
						//5.检查类名是否存在: bg是否存在
						$("#hasClassBtn").click(function(){
							var hc=$("#targetElment").hasClass("bd");
							$("#resultArea").text("目标元素 bg 类名是否存在:"+hc);
						});
		</script>
	</body>
</html>